<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>高德地图demo</title>
	<style>
		#container {
			width: 100%;
			height: 480px;
		}
		/* 隐藏高德logo */
		.amap-logo{
			opacity: 0 !important;
		}
		/* 隐藏高德版权信息 */
		.amap-copyright{
			opacity: 0 !important;
		}
		/* 隐藏v2.0高德背景颜色， */
		.amap-container{
			background: none !important;
		}

		/* 点标记样式 */
		.marker{
			color: red;
			white-space: nowrap;
		}
	</style>
</head>

<body>
	<h2>高德地图demo</h2>

	<!-- 放置地图的容器 -->
	<div id="container"></div>

	<!-- 直接用script标签加载 -->
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=79bd92e2914923f528474aeb8d098209"></script>
	
	<!-- 引入Vue -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<!-- 引入coordtransform坐标转换 -->
	<script src="./utmConvert/wgs84togcj02.js"></script>

	<!-- 引入L 进行UTM坐标转换 -->
	<script src="./utmConvert/leaflet-src.js"></script>
    <script src="./utmConvert/L.LatLng.UTM.js"></script>

	<script>
		// 实例化一个地图对象，放入id为container的容器中
		let map = new AMap.Map('container', {
			mapStyle: 'amap://styles/f7623cef5816abe36ab37f641cd44f73', // 自定义地图样式
			zoom: 12,
			expandZoomRange: true, // 是否支持可以扩展最大缩放级别,和zooms属性配合使用
            zooms: [3, 20], // 设置缩放级别范围 3-20 级
			jogEnable: false, //是否使用缓动效果，关闭平移惯性感觉舒服一些
		})

		// 让图形显示在合适的位置 放到下面
		// map.setFitView([marker, imgMarker], true, [60, 60, 60, 60], 20)

		// 获取中心经纬度坐标
		let center = map.getCenter()

		// 绘制覆盖物 Marker
		const text = '我是点标记'
		const marker = new AMap.Marker({
			position: center,   // 经纬度对象，也可以是经纬度构成的一维数组，如 [116.39, 39.9]
			content: `<span class="marker">${text}</span>`,
			anchor: 'center',
			offset: new AMap.Pixel(0, 0)
		})
		map.add(marker) // 将覆盖物加入到地图中

		// 绘制图片覆盖物
		const icon = new AMap.Icon({
			image: './demo.png',
			size: new AMap.Size(32, 32), // 图片原始尺寸
			imageOffset: new AMap.Pixel(2, 2), // 设置图片偏移
			imageSize: new AMap.Size(28, 28) // 设置图片新尺寸
		})

		const imgMarker = new AMap.Marker({
			position: map.getBounds().getNorthEast(),   // 经纬度对象 这里从边界上取一个点
			icon: icon,
			anchor: 'center',
			offset: new AMap.Pixel(0, 0),
			angle: 90 //正北为起点，顺时针转动
		})
		map.add(imgMarker)

		// 让图形显示在合适的位置
		map.setFitView([marker, imgMarker], true, [60, 60, 60, 60], 20)

		// 限制地图区域为当前可视区域
		map.setLimitBounds(map.getBounds())

		// 信息窗体
		// 构造一个Vue实例
		const VueComponent = Vue.extend({
			template: `
				<div @click="handleClick">{{title}}</div>
			`,
			data: function () {
				return {
					title: '我是信息窗体'
				}
			},
			methods: {
				handleClick(){
					this.title = '点击了信息窗体'
				}
			}
		})

		const infoWindow = new AMap.InfoWindow({
			isCustom: true, // 开启自定义
			content: new VueComponent().$mount('').$el, //挂载后将元素放入content
			autoMove: false // 是否自动调整窗体到视野内
		})
		infoWindow.open(map, map.getBounds().getCenter())

		// 使用坐标转换将UTM坐标转换成高德使用的GCJ-02经纬度坐标
		const utm2LatLng = (x, y, zone = 49, band = 'R') => {
			const item = L.utm({x, y, zone, band})  // 先将UTM坐标转成 WGS-84经纬度坐标
			const coord = item.latLng()
			return coordtransform.wgs84togcj02(coord.lng, coord.lat) // 再将WGS-84经纬度坐标转换成高德使用的GCJ-02经纬度坐标
		}
		console.log(utm2LatLng(690556.5, 3118537.6, 49, 'R')) // 49R区域包含了湖南
	</script>
</body>

</html>